<!--
 * @Author: your name
 * @Date: 2023-02-27 09:30:31
 * @LastEditTime: 2023-03-04 19:37:18
 * @LastEditors: DESKTOP-4QFD9PO
 * @Description: In User Settings Edit
 * @FilePath: \ClothMes\src\components\ProductionManagement\BasicData\CommissioningTypeDefinition.vue
-->
<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form divClass" v-if="headerShow">
                <div></div>
                <div class="my-tool-bar" style="float: right;">
                    <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
                  <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :localeText="localeText1" @grid-ready="gridReady" style="height:100%"
                    :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList" :columnDefs="tc">
                </AgGridVuesCopys>
            </a-spin>
        </template>
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
            style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page"
            :page-size-options="pagingList1" />
        <a-drawer style="z-index:999" ok-text='保存' cancel-text='关闭' :drawer-style="{ 'zIndex': 999 }" :mask-closable="false"
            :width="400" unmount-on-close popup-container=".arco-tabs-content" height="100%" :visible="pageData.showAdd"
            @ok="sideOk" @cancel="pageData.showAdd = false" :ok-loading="pageData.pageLoading">
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <div>
                <a-form ref="formRef" layout="horizontal" :model="dataForm">
                    <a-form-item label-col-flex="110px" label="调修改机类型" field="adjustmentTypeName"
                    :validate-trigger="['change', 'blur']" :rules="[{ required: true, message: '调修改机类型必填' }]">
                    <a-input class="bacClass" placeholder=" " v-model="dataForm.adjustmentTypeName" />
                </a-form-item>
                    <a-form-item label-col-flex="110px" label="时间(小时)" field="hour" :validate-trigger="['change', 'blur']"
                        :rules="[{ required: true, message: '时间(小时)必填' }]">
                        <a-input class="bacClass" placeholder=" " v-model="dataForm.hour" />
                    </a-form-item>
                    <!-- <a-form-item label-col-flex="110px" label="单价" field="price" :validate-trigger="['change', 'blur']"
                                    :rules="[{ required: true, message: '单价必填' }]">
                                    <a-input class="bacClass" placeholder=" " v-model="dataForm.price" />
                                </a-form-item> -->
                    <a-form-item label-col-flex="110px" label="备注" field="remark">
                        <a-textarea class="bacClass" v-model="dataForm.remark" :max-length="400" allow-clear
                            show-word-limit />
                    </a-form-item>
                </a-form>
            </div>
        </a-drawer>

    </pageTabelLayout>
</template>

<script lang="ts">
import { post, get } from "@/api/http";
import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
} from "@/hooks/table";
import { localeText } from '@/api/aggridZw'
import { ref, reactive, onMounted } from "vue";
import Toolbar from "@/components/Toolbar.vue";
import { Form, Message, Modal, Pagination } from "@arco-design/web-vue";
import { FormInstance } from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'

import { pagingList } from '@/api/paging'

interface Cloth {
    merceryCode: string;
}

interface ClothInfo {
    "id": any,
    "greyCloth": string | undefined,
    "adjustmentTypeName": string | undefined,
    "hour": string | undefined,
    "price": string | undefined,
    "remark": string | undefined,
    "clothRackWidth": string | undefined,
    "needleModel": string | undefined,
    "needleOnePerod": any,
    "needleTwoPerod": any,
    "needleThreePerod": any,
    "needleFourPerod": any,
    "dodge": any,
    "broken": any,
    "allTrue": any,
    "clothTensionAD": string | undefined,
    "clothTensionOS": any,
    "baseGasket": string | undefined,
    "sandTrayMiddlePlate": any,
    "sandTableSurfacePlate": any,
    "gear": string | undefined,
    "needleGrade": string | undefined,
    "deleteState": any,
    "createName": string | undefined,
    "createTime": string | undefined,
    "updateName": string | undefined,
    "updateTime": string | undefined,

}

export default {
    name: "CommissioningTypeDefinition",
    setup() {
        const dataForm = reactive<ClothInfo>({
            "id": "null",
            "greyCloth": "",
            "adjustmentTypeName": "",
            "hour": "",
            "price": "",
            "remark": "",
            "clothRackWidth": "",
            "needleModel": "",
            "needleOnePerod": 0,
            "needleTwoPerod": 0,
            "needleThreePerod": 0,
            "needleFourPerod": 0,
            "dodge": 0,
            "broken": 0,
            "allTrue": 0,
            "clothTensionAD": "",
            "clothTensionOS": 0,
            "baseGasket": "",
            "sandTrayMiddlePlate": 0,
            "sandTableSurfacePlate": 0,
            "gear": "",
            "needleGrade": "",
            "deleteState": 0,
            "createName": "",
            "createTime": "",
            "updateName": "",
            "updateTime": "",

        });
        const headerShow = ref<boolean>(true)
        //查询
        const scrollbar = ref(true)
        function PageSize(val: any) {
            pagination.page = val
            doRefresh();
        }
        const total = ref(0);
        const page = ref(1);
        const size = ref(10);
        function change1(val: any) {
            pagination.pageSize = val
            doRefresh();
        }
        function doRefresh() {

            pageData.pageLoading = true

            post({
                url: "/qms/AdjustmentType/getPage",
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    deleteState: 0,
                    // greyCloth: pageData.dropDownData,
                    // adjustmentTypeName: pageData.dropDownData1,
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {

                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list);
                        //pagination.setTotalSize(data.total);
                        total.value = data.total;
                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }

        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        //检验表单是否含有中文的方法
        const hasChiese = validate.includeChinese;
        const tableColumns = useTableColumn([
            {
                title: "序号",
                key: "serialNo",
                dataIndex: "serialNo",
                width: 150
            },
            {
                title: "调修改机类型",
                key: "adjustmentTypeName",
                dataIndex: "adjustmentTypeName",
                width: 150
            },
            {
                title: "时间(小时)",
                key: "hour",
                dataIndex: "hour",
                width: 150
            },

            // {
            //     title: "单价",
            //     key: "price",
            //     dataIndex: "price",
            //     width: 150
            // },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },

            {
                title: "创建人",
                key: "createName",
                dataIndex: "createName",
                width: 150
            },
            {
                title: "创建时间",
                key: "createTime",
                dataIndex: "createTime",
                width: 150
            },
            {
                title: "最后修改人",
                key: "updateName",
                dataIndex: "updateName",
                width: 150
            },
            {
                title: "最后修改时间",
                key: "updateTime",
                dataIndex: "updateTime",
                width: 150
            },

            {
                title: "操作",
                key: "id",
                dataIndex: "id",
                slotName: "action",
                width: 150, fixed: 'right'
            },
        ]);

        const scroll = {
            x: 2000,
            y: 200
        };

        let tc: any[] = tableColumns.map((o) => {

            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            if (o.slotName === 'action') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj["lockPosition"] = "right"
                obj["width"] = 80
                obj['cellRenderer'] = {
                    template: `<a-tag color="#ff7d00" class="gesture" @click="a">修改</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            a
                        }
                    }

                }
            }

            return obj
        })



        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)

        const tablediv = ref(null)
        const pageData = reactive<{
            clothList: Cloth[]
            showAdd: boolean
            sideTitle: string
            dropDownData: any
            pageLoading: boolean,
            theight: number,
            tablediv: any,
            rHeight: number | undefined,
            btnList: any[],
            isEdit: boolean,
            codeList: any[],
            greyClothList: any[],
            dropDownData1: any
        }>({
            clothList: [],
            showAdd: false,
            sideTitle: "新增调机类型",
            dropDownData: "",
            pageLoading: false,
            theight: 0,
            tablediv: null,
            rHeight: 0,
            btnList: [],
            isEdit: false,
            codeList: [],
            greyClothList: [],
            dropDownData1: ""
        });


        onMounted(() => {
            pageData.rHeight = document.getElementsByClassName("arco-tabs-content")[0]?.clientHeight

            //弹出层的高
            if (pageData.rHeight !== undefined) {
                pageData.rHeight = pageData.rHeight - 100;
            }
            window.addEventListener('resize', () => {
                pageData.rHeight = document.getElementsByClassName("arco-tabs-content")[0]?.clientHeight
                //弹出层的高
                if (pageData.rHeight !== undefined) {
                    pageData.rHeight = pageData.rHeight - 100;
                }
            })

        });
        let cxbl = ""
        //查询
        const selectHandler = () => {
            pagination.page = 1
            cxbl = pageData.dropDownData
            doRefresh();
        }
        const queryData = reactive({
            clothType: "",
        });
        const addHandler = () => {
            for (var key in dataForm) {
                if (key === "id") {
                    dataForm[key] = null;
                } else {
                    dataForm[key] = "";
                }

            }
            pageData.showAdd = true;
            pageData.sideTitle = "新增调机类型";
        };


        // 表格准备事件
        const gridOption = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
        }

        const formRef = ref<FormInstance>();
        const sideOk = () => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    if (pageData.sideTitle === "新增调机类型") {
                        pageData.pageLoading = true
                        post({
                            url: "/qms/AdjustmentType/insert",
                            data: [dataForm],
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();

                                pageData.showAdd = false;

                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }
                            doRefresh();
                        }).finally(() => {
                            doRefresh();
                            pageData.pageLoading = false
                        })
                    } else {
                        pageData.pageLoading = true
                        post({
                            url: "/qms/AdjustmentType/update",
                            data: [dataForm],
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;

                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                                doRefresh();
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }

                        }).finally(() => {
                            doRefresh();
                            pageData.pageLoading = false
                        })
                    }
                }
            });
        };
        const deleteHandler = () => {
            if (gridOption.value.getSelectedRows() === 0) {
                Message.error('请先勾选');
                return
            }
            Modal.confirm({
                title: "系统提示",
                content: "确认删除选中的数据?",
                onOk() {
                    pageData.pageLoading = true
                    post({
                        url: "/qms/AdjustmentType/delete",
                        //data: selectedRowKeys.value,
                        data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, message }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: "删除成功",
                                duration: 5000,
                            });

                            pagination.page = 1
                            doRefresh();

                        } else {
                            Message.error({
                                content: message,
                                duration: 5000,
                            });
                        }

                    }).finally(() => {
                        pageData.pageLoading = false
                    })
                },
            });
        };
        const editHandler = (record: ClothInfo) => {
            for (var key in record) {
                dataForm[key] = record[key]
            }
            pageData.sideTitle = '修改调机类型'
            pageData.showAdd = true
        };

        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            //flex: 1
        }
        const localeText1: any = ref(localeText)
        const huiche = () => {
            doRefresh();
        }
        const pagingList1: any = ref(pagingList)
        return {
            headerShow,
            pagingList1,
            huiche,
            localeText1,
            scroll,
            scrollbar,
            tablediv,
            hasChiese,
            deleteHandler,
            sideOk,
            formRef,
            dataForm,
            addHandler,
            selectedRowKeys,
            pagination,
            tableColumns,
            table,
            rowKey,
            pageData,
            queryData,
            editHandler,
            selectHandler,
            PageSize,
            change1,
            handleChange,
            defaultColDef,
            tc,
            gridOption,
            gridReady,
            total
        };
    },
    components: { Toolbar,  }
};
</script>
